<!--
 * @Author: ckk
 * @Date: 2022-09-01 13:39:27
 * @LastEditors: ckk
 * @LastEditTime: 2022-09-05 16:57:40
 * @Description: 
-->
<template>
  <div class="tabBar">
    <div v-if="datas.iconList && datas.iconList.length !== 0" class="tabbar">
      <van-tabbar
        v-model="active"
        :placeholder="true"
        :fixed="false"
        :border="datas.isShowBorder"
        :active-color="datas.activeColor"
        :inactive-color="datas.inactiveColor">
        <van-tabbar-item
          v-for="(item, index) in datas.iconList"
          :key="index"
          :name="item.iconName"
          :dot="item.isDot">
          <span>{{ item.iconText }}</span>
          <template #icon="props">
            <img :src="props.active ? item.iconPic : item.inactive" />
          </template>
        </van-tabbar-item>
      </van-tabbar>
    </div>

    <div v-else>
      <van-tabbar
        v-model="datas.Highlight"
        :fixed="false"
        :placeholder="true"
        :border="datas.isShowBorder"
        :active-color="datas.activeColor"
        :inactive-color="datas.inactiveColor">
        <van-tabbar-item icon="search" name="home">标签</van-tabbar-item>
        <van-tabbar-item icon="home-o">标签</van-tabbar-item>
        <van-tabbar-item icon="friends-o">标签</van-tabbar-item>
        <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
      </van-tabbar>
    </div>

    <!-- 删除组件 -->
    <slot name="deles" />
  </div>
</template>

<script>
export default {
  name: "TabBar",
  props: {
    datas: Object,
  },
  data() {
    return {
      active: 0,
    };
  },

  computed: {},

  watch: {},

  created() {
    if(document.querySelector(".phone-container")){
      document.querySelector(".phone-container").style.cssText = "padding-bottom: 50px";
    }
  },

  mounted() {},

  beforeDestroy() {
    if(document.querySelector(".phone-container")){
      document.querySelector(".phone-container").style.cssText = "padding-bottom: 0px";
    }
  },

  methods: {},
};
</script>

<style lang="scss" scoped>
.tabBar {
  width: 100%;
  position: relative;
  position: absolute;
  bottom: -54px;
  left: 0px;
  z-index: 2;
}

.tabbar {
  .van-icon {
    width: 25px;
    height: 25px;
    img {
      display: block;
      width: 100%;
      height: 100%;
    }
  }
}
</style>
